<template>
  <div id="app" class="full" :style="style2">
    <div :style="style" class="view">
      <router-view></router-view>
    </div>
    <div class="btn-group" :class="flag ? 'move' : 'move-back'">
      <div @click="setStyle(0)">原始尺寸</div>
      <div @click="setStyle(1)">全屏适应</div>
      <div @click="setStyle(2)">宽度适应</div>
      <div @click="setStyle(3)">高度适应</div>
      <!--            <div @click="setTheme(0)">科技灰</div>-->
      <!--            <div @click="setTheme(1)">天空蓝</div>-->
      <div class="arrow" @click="flag = !flag">{{ flag ? "收起" : "" }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      height: 1080,
      width: 1920,
      style: {},
      flag: false,
      style2: {
        overflow: 'hidden'
      },
      UserName: 'ceshi2',
      PassWord: 'tjzc@123',
      codeImg: '',
      key: '',
      stompClient: {},
      socket: {}
    }
  },
  mounted () {
    this.setStyle(0)
    const that = this
    window.onresize = function () {
      that.setStyle(1)
    }
  },
  created () {

  },

  watch: {

  },
  methods: {

    setTheme (index) {
      this.$bus.$emit('theme', index)
    },
    setStyle (i) {
      this.style = {}
      this.style2 = {}
      if (i === 0) {
        this.setOriginal()
      }
      if (i === 1) {
        this.setCover()
      }
      if (i === 2) {
        this.setAdaptWidth()
      }
      if (i === 3) {
        this.setAdaptHeight()
      }
    },
    setOriginal () {
      this.style = {}
      this.style2 = {}
    },
    setAdaptWidth () {
      const bWidth = window.innerWidth
      const bHeight = window.innerHeight
      this.$set(this.style, 'width', this.width + 'px')
      const zoom = bWidth / this.width
      this.$set(this.style, 'transform', 'scale(' + zoom + ',' + zoom + ')')
      this.$set(
        this.style,
        'margin-top',
        bHeight / 2 - (this.height * zoom) / 2 + 'px'
      )
      this.$set(this.style, 'overflow', 'hidden')
      this.$set(this.style, 'transform-origin', 'left top')
      this.$set(this.style2, 'overflow', 'hidden')
      // Bus.$emit('zoom', zoom)
    },
    setAdaptHeight () {
      const bHeight = window.innerHeight
      this.$set(this.style, 'height', this.height + 'px')
      const zoom = bHeight / this.height
      this.$set(this.style, 'transform', 'scale(' + zoom + ',' + zoom + ')')
      this.$set(this.style2, 'overflow-y', 'hidden')
      this.$set(this.style, 'transform-origin', 'left top')
      // Bus.$emit('zoom', (bHeight / this.height))
    },
    setCover () {
      const bHeight = window.innerHeight
      const bWidth = window.innerWidth
      this.$set(this.style, 'height', this.height + 'px')
      this.$set(this.style, 'width', this.width + 'px')
      const scaleX = bWidth / this.width
      const scaleY = bHeight / this.height
      this.$set(
        this.style,
        'transform',
        'scale(' + scaleX + ',' + scaleY + ')'
      )
      this.$set(this.style, 'transform-origin', 'left top')
      this.$set(this.style, 'overflow', 'hidden')
      this.$set(this.style2, 'overflow', 'hidden')
    },

    // login() {
    //   const url = `/api/blade-auth/oauth/token?tenantId=000000&username=${
    //     this.UserName
    //   }&password=${md5(
    //     this.PassWord
    //   )}&grant_type=password&scope=all&type=account`;
    //   const params = {
    //     tenantId: "000000",
    //     userrame: this.UserName,
    //     password: md5(this.PassWord),
    //     grant_type: "password",
    //     scope: "all",
    //     type: "account",
    //   };
    //   const headers = {
    //     headers: {
    //       Authorization: "Basic c3dvcmQ6c3dvcmRfc2VjcmV0",
    //     },
    //   };
    //   this.$post(url, params, headers)
    //     .then((data) => {
    //       if (data && data !== "") {
    //         if (data.error_code === 400) {
    //           alert("用户名或密码不正确!");
    //         } else {
    //           this.success(data);
    //         }
    //       }
    //     })
    //     .catch((error) => {
    //       this.VerificationCode = "";
    //       this.GetVerificationCode();
    //       alert(error.msg);
    //     });
    // },
    success (data) {
      sessionStorage.setItem('userName', this.UserName)
      sessionStorage.setItem('passWord', this.PassWord)
      sessionStorage.setItem('UserInfo', JSON.stringify(data))
      sessionStorage.setItem('AccessToken', data.access_token)
      sessionStorage.setItem('userId', data.user_id)
    }
  }
}
</script>
<style lang="less" scoped>

#app {
  width: 1920px;
  height: 100%;
  float: left;
  position: absolute;
  z-index: 999;
  .view {
    z-index: 1;
  }
  .move {
    animation: moveTo 1s ease-in-out 0s alternate forwards;
    position: relative;
  }

  .move-back {
    animation: moveBack 1s ease-in-out 0s alternate forwards;
  }

  @keyframes moveTo {
    from {
      top: -150px;
    }
    to {
      top: 0;
    }
  }
  @keyframes moveBack {
    from {
      top: 0;
    }
    to {
      top: -150px;
    }
  }

  .btn-group {
    position: fixed;
    top: -150px;
    right: 10px;
    z-index: 999;
    > div {
      height: 30px;
      line-height: 30px;
      background-color: #1e8db0;
      margin-bottom: 5px;
      padding: 0 10px;
      cursor: pointer;
      color: #fff;
      /*border-radius: 10px;*/
    }

    .arrow {
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-bottom-left-radius: 500px;
      border-bottom-right-radius: 500px;
    }
  }
}
</style>
<style>
.flex {
  display: flex;
}
</style>
